<template>
  <div>
    <div class="header_top">
      <div class="w960">
        <span class="time">ES搜索引擎-邮件资源搜索</span>
        <div class="toplinks">
          [&nbsp;
          <a
            href="https://www.elastic.co/guide/cn/elasticsearch/guide/current/index.html"
            target="_blank"
          >ElasticSearch权威指南</a>&nbsp;]
          [&nbsp;
          <a
            href="http://wpa.qq.com/msgrd?v=3&amp;uin=2109258438&amp;site=qq&amp;menu=yes"
            target="_blank"
          >QQ联系我</a>&nbsp;]
        </div>
      </div>
    </div>
    <div class="login_box">
      <div class="login_l_img">
        <img src="./login-img.png" />
      </div>
      <div class="login" style="margin-top:20px">
        <div class="login_logo">
          <a href="#">
            <img src="./login_logo.png" />
          </a>
        </div>
        <div class="login_name">
          <p>ES邮件后台管理系统</p>
        </div>
        <div v-if="loginWay==true">
          <input type="text" placeholder="用户名" v-model="userName" />
          <input type="text" placeholder="密码" v-model="passWord" />
          <div>
            <input
              id="code"
              placeholder="验证码"
              type="text"
              class
              style="width:170px;margin-left:0px"
              v-model="inputCode"
            />
            <img @click="replace" :src="imgCode" style="margin-left: 50px;" />
          </div>
          <input value="账号登录" style="width:100%;" type="submit" @click="verify()" />
        </div>
        <div v-else-if="loginWay==false">
          <el-row :gutter="1">
            <el-col :span="16">
              <input type="text" maxlength="11" placeholder="手机号,若未注册自动注册" v-model="mobilePhone" />
            </el-col>
            <el-col :span="6">
              <el-button
                type="success"
                :disabled="!rightPhone"
                @click.prevent="getCode()"
              >{{computeTime>0 ? `(${computeTime}s)已发送` : '获取验证码'}}</el-button>
            </el-col>
          </el-row>

          <input type="text" maxlength="8" placeholder="请注意查收手机验证码" v-model="mobileCode" />
          <strong>温馨提示：用户需要先阅读用户协议默认代表同意0.4元/条</strong> 
          <a
            href="javascript:;"
            @click="DialogVisible=true"
          >《用户服务协议》</a>
          <input value="手机登录" style="width:100%;margin-top:10px" type="submit" @click="verifyMoblie()" />
          <p>温馨提示：阿里云短信服务请不要频繁发送.阿里云短信服务接口触发Message=触发分钟级流控Permits:1、小时级流控Permits:5、天级流控Permits:10，这是个阿里云返回来的错误信息。</p>
          <p>错误原因是因为短信发送有默认的频率限制如下：</p>
          <p>短信验证码 ：使用同一个签名，对同一个手机号码发送短信验证码，支持1条/分钟，5条/小时 ，累计10条/天。</p>
          <p>短信通知： 使用同一个签名和同一个短信模板ID，对同一个手机号码发送短信通知，支持50条/日</p>
        </div>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-button type="text" @click="loginWay=true" style="margin-left:0px">账号登陆</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="text" @click="loginWay=false" style="margin-right:0px">短信登录</el-button>
          </el-col>
        </el-row>

        <el-button type="text" @click="register()">还没账号？注册一个吧</el-button>
      </div>
      <div class="copyright" style="margin-top:200px">
        <strong>中讯邮电有限公司 版权所有©2016-2020 技术支持电话：000-00000000</strong>
      </div>
    </div>
    <el-dialog title="用户服务协议" :visible.sync="DialogVisible" width="30%" center>
      <span>{{message}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="DialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import { message } from "../config/config";
export default {
  data() {
    return {
      userName: "",
      passWord: "",
      imgCode: "/api/verifyCode",
      inputCode: "",
      loginWay: true,
      mobilePhone: "",
      mobileCode: "",
      message: message[0],
      DialogVisible: false,
      computeTime: 0
    };
  },
  computed: {
    rightPhone() {
      return /^1[3456789]\d{9}$/.test(this.mobilePhone);
    }
  },
  methods: {
    verify() {
      axios
        .get(
          "/api/auth/userName/" +
            this.userName +
            "?codeBar=" +
            this.inputCode +
            "&passWord=" +
            this.passWord
        )
        .then(response => {
          // 登陆成功后端返回一个userSO对象，里面含有token
          let userSO = response.data;
          if (!(userSO == "")) {
            let userSO_json = JSON.stringify(userSO); //把对象转化为字符串（stringify）存放进sessionStorage
            sessionStorage.setItem("userSO_json", userSO_json);
            this.$message({
              showClose: true,
              message: "恭喜你，本次认证成功",
              type: "success"
            });
            this.$router.push({
              path: "/backhome/emlserver"
            });
          }
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: "本次认证失败,账户或验证码验证失败",
            type: "warning"
          });
        });
    },
    register() {
      this.$router.push({
        path: "/register"
      });
    },
    replace() {
      const num = Math.ceil(Math.random() * 10); // 生成一个随机数（防止缓存）
      this.imgCode = "/api/verifyCode?" + num;
      console.log("this.imgCode", this.imgCode);
    },
    getCode() {
      if (!this.computeTime) {
        this.computeTime = 60;
        this.timer = setInterval(() => {
          this.computeTime--;
          if (this.computeTime <= 0) {
            clearInterval(this.timer);
          }
        }, 1000);
        axios
          .post("/api/sendsms/" + this.mobilePhone)
          .then(response => {
             this.$message({
              showClose: true,
              message: "恭喜你验证码获取成功请注意查收",
              type: "success"
            });
          })
          // eslint-disable-next-line no-unused-vars
          .catch(error => {});
      }
    },
    verifyMoblie() {
       axios
          .post("/api/smslogin/" + this.mobilePhone+"?inputSmsCode="+this.mobileCode)
          .then(response => {
            let userSO = response.data;
          if (!(userSO == "")) {
            let userSO_json = JSON.stringify(userSO); //把对象转化为字符串（stringify）存放进sessionStorage
            sessionStorage.setItem("userSO_json", userSO_json);
            this.$message({
              showClose: true,
              message: "恭喜你，本次认证成功",
              type: "success"
            });
            this.$router.push({
              path: "/backhome/emlserver"
            });
            }
          })
          // eslint-disable-next-line no-unused-vars
          .catch(error => {
            this.$message({
            showClose: true,
            message: "本次认证失败,您的短信验证码输入错误",
            type: "warning"
          });
          });
      }
    }
};
</script>
<style scoped>
@import "./login.css";
</style>
